switch: Add hover styles

Same as checkboxes.

Closes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6455

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2717>

diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss
index 31e4de05ab439150b6df4c0dd1be17200d8ecdff..28416b5c89e94f8c31927d6eb6ae6bfa0cc1a623 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_switches.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switches.scss
@@ -11,8 +11,16 @@ $switch_handle_size: 20px;
 
   @if $contrast == 'high' {
     background: transparentize(if($variant == 'light', black, white), .7);
+
+    &:hover {
+      background: transparentize(if($variant == 'light', black, white), .6);
+    }
   } @else {
     background: transparentize(if($variant == 'light', black, white), .85);
+
+    &:hover {
+      background: transparentize(if($variant == 'light', black, white), .8);
+    }
   }
 
   StIcon {
@@ -33,6 +41,11 @@ $switch_handle_size: 20px;
     background: $selected_bg_color;
     color: $selected_fg_color;
 
+    &:hover {
+      background-color: lighten($selected_bg_color, 5%);
+      color: lighten($selected_fg_color, 5%);
+    }
+
     .handle {
       background: white;
     }

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index a37484bbdaf228bf34da6e7578e6c137123bf1fe..bc98be2fc14a301bcab65b0fa93be1f98381feca 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -343,6 +343,7 @@ export const Switch = GObject.registerClass({
         super._init({
             style_class: 'toggle-switch',
             accessible_role: Atk.Role.CHECK_BOX,
+            track_hover: true,
         });
 
         const box = new St.BoxLayout({